<template>
  <div class="cards" v-loading="loading">
    <div class="cards-head">
      <group-tags :data="groupList" @select="onSelect" v-model="model.groupId" @addOk="onAddOk"
                  @remove="onRemove"/>
      <div class="cards-search">
        <sys-search v-model="model.reportName" placeholder="大屏名称" @search="onSearch"/>
      </div>
    </div>
    <div class="cards-main">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
          <div class="card-add" @click="onAdd">
            <i class="el-icon-document-add"></i>
            创建新的大屏
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" v-for="(item, index) in reportList" :key="index">
          <div class="card-item">
            <div class="card-item-inner">
              <img :src="item.reportImage" preview="1"/>
            </div>
            <div class="card-item-footer">
              <div class="card-item-name">{{ item.reportName }}</div>
              <div class="card-item-tools">
                <div class="card-item-status">
                  <span class="dot" :class="{success: item.enableFlag}"></span>
                  {{ item.enableFlag ? '已发布' : '未发布' }}
                </div>

                <el-tooltip class="item" effect="dark" content="设计" placement="bottom">
                   <span class="card-item-btn" @click="onDesign(item)">
                     <i class="el-icon-edit"></i>
                   </span>
                </el-tooltip>

                <el-tooltip class="item" effect="dark" content="修改">
                  <span class="card-item-btn" @click="edit(item)">
                     <i class="my-icon icon-edit"></i>
                   </span>
                </el-tooltip>

                <el-dropdown trigger="click" @command="(command) => {handleCommand(item, command)}">
                   <span class="card-item-btn">
                      <i class="el-icon-more"></i>
                   </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="preView" icon="my-icon icon-lcd">预览</el-dropdown-item>
                    <el-dropdown-item command="publish" icon="my-icon icon-redo" v-if="!item.enableFlag">发布</el-dropdown-item>
                    <el-dropdown-item command="unpublish" icon="my-icon icon-undo" v-else>取消发布</el-dropdown-item>
                    <el-dropdown-item command="clone" icon="my-icon icon-copy-rect" divided>克隆</el-dropdown-item>

                    <el-dropdown-item command="delete" icon="my-icon icon-delete">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="cards-page">
      <el-pagination
          background
          :page-sizes="[11, 23, 59]"
          layout="total, sizes, prev, pager, next"
          :total="page.total"
          :page-size.sync="page.limit"
          :current-page.sync="page.page">
      </el-pagination>
    </div>

    <simple-dialog v-bind.sync="dialog" @on-ok="onDialogOk"/>
  </div>
</template>

<script>
import {
  postImagegroupSave,
  postImagegroupDelete,
  postImagegroupListUserAll
} from '@/api/image-group'
import {postReportList, postReportDelete, postReportSave} from '@/api/report'
import groupTags from '@/components/report/image/group-tags'
import sysSearch from '@/components/common/search/sys-search'
import edit from './edit'
import dialogMixin from '@/components/common/dialog/dialog-mixin'

const type = 'dashboard'
export default {
  name: 'dashboard',
  cnName: 'dashboard',
  mixins: [dialogMixin],
  components: {
    groupTags,
    sysSearch
  },
  data() {
    return {
      loading: false,
      groupList: [],
      reportList: [],
      model: {
        reportName: '',
        groupId: ''
      },
      page: {
        total: 0,
        page: 1,
        limit: 11
      }
    }
  },
  methods: {
    async init() {
      const res = await postImagegroupListUserAll({type})
      const list = res || []
      this.groupList = list.map(o => {
        return {
          label: o.name,
          value: o.id
        }
      })
      this.groupList.unshift({label: '全部', value: '', closeable: false})

      await this.load()
    },
    reload() {
      this.onSearch()
    },
    onSearch() {
      this.page.page = 1
      this.load()
    },
    async load() {
      this.loading = true
      const res = await postReportList({...this.page, ...this.model})
      this.loading = false
      this.page.total = res.totalCount
      const list = res.list || []
      this.reportList = list
    },
    onSelect(item) {
      this.onSearch()
    },
    onAddOk(name) {
      if (!name) {
        return
      }
      postImagegroupSave({name, type}).then(res => {
        this.init()
      })
    },
    onRemove(item, index) {
      this.$confirm('此操作将会删除分组下的大屏，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (item.id === this.currTag) {
          this.model.groupId = ''
        }
        this.loading = true
        postImagegroupDelete([item.value]).then(_ => {
          this.init()
        })
      })
    },
    onAdd() {
      this.setDialog({
        title: '新增大屏',
        width: '50%',
        height: '50%',
        comp: edit,
        props: {
          groupId: this.model.groupId
        }
      })
    },
    handleCommand(item, command) {
      this[command](item)
    },
    edit(item) {
      this.setDialog({
        title: '编辑大屏',
        width: '50%',
        height: '50%',
        comp: edit,
        props: {
          id: item.id
        }
      })
    },
    onDesign(item) {
      window.open('/#/design?id=' + item.id)
    },
    preView(item) {
      // 预览
      window.open('/#/view?id=' + item.id)
    },
    publish(item) {
      postReportSave({id: item.id, enableFlag: 1}).then(_ => {
        this.reload()
      })
    },
    unpublish(item) {
      postReportSave({id: item.id, enableFlag: 0}).then(_ => {
        this.reload()
      })
    },
    clone(item) {},
    delete(item) {
      this.$confirm('确定进行删除操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        postReportDelete([item.id]).then(_ => {
          this.$notify.success('删除成功!')
          this.reload()
        })
      })

    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style lang="less" scoped>
.cards {
  padding: 0;
  border: 5px solid #f0f0f0;
  height: 100%;
  box-sizing: border-box;

  &-head {
    padding: 10px;
    box-sizing: border-box;
    position: relative;
  }

  &-search {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 300px;
  }

  &-main {
    padding: 10px;
    font-size: 14px;
  }

  &-page {
    text-align: right;
    margin: 10px;
  }

  .card-add {
    position: relative;
    height: 250px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px dotted #ddd;
    color: #5a5a5a;
    cursor: pointer;
    border-radius: 4px;

    & > i {
      font-size: 48px;
      margin-bottom: 15px;
      cursor: pointer;
    }
  }

  .card-item {
    position: relative;
    height: 250px;
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;

    &-inner {
      height: 190px;
      text-align: center;

      img {
        width: 100%;
        max-height: 100%;
      }
    }

    &-footer {
      margin-top: 12px;
      display: flex;
      justify-content: space-between;
    }

    &-name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: break-all;
      line-height: 30px;
    }

    &-tools {
      display: flex;
      align-items: center;
      text-align: center;
      justify-content: flex-end;
      min-width: 180px;
      gap: 10px 15px;
    }

    .dot {
      width: 8px;
      height: 8px;
      margin-right: 2px;
      border-radius: 50%;
      background-color: #fcbc40;
      display: inline-block;

      &.success {
        background-color: #34c749;
      }
    }

    &-btn {
      border: 1px solid #eee;
      padding: 5px 10px;
      border-radius: 5px;
      cursor: pointer;

      &:hover {
        color: #1890ff;
        border-color: #1890ff;
      }
    }
  }

  /deep/ .my-icon {
    font-size: 12px;
  }
}
</style>
